<template>
  <div>
    <div id="pie-echarts" style="width:306px;height:360px;" />
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'PieEcharts',
  mounted() {
    var chartDom = document.getElementById('pie-echarts')
    var myChart = echarts.init(chartDom)
    var option

    option = {
      title: {
        text: '购买终端',
        textStyle: {
          color: '#5b698d'
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b} : {c}个;占比 ({d}%)',
        backgroundColor: 'rgba(0,0,0,.8)',
        textStyle: {
          color: '#fff'
        }
      },
      series: [
        {
          name: '终端',
          type: 'pie',
          radius: [50, 80],
          center: ['50%', '50%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 5
          },
          data: [
            {
              value: 30,
              name: ' PC Web',
              label: {
                normal: {
                  textStyle: {
                    // 字体颜色渐变  扇颜色保持一致
                    color: '#4B4CDC',
                    fontSize: 12
                  }
                }
              },
              itemStyle: {
                normal: {
                  // 渐变柱状图
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#6D48DC' }, // 柱图渐变色
                    { offset: 0.5, color: '#6D48DC' }, // 柱图渐变色
                    { offset: 1, color: '#4B4CDC' } // 柱图渐变色
                  ])
                }
              }
            },
            {
              value: 28,
              name: 'Andriod',
              label: {
                normal: {
                  // 字体颜色
                  textStyle: {
                    color: '#248DFF',
                    fontSize: 12
                  }
                }
              },
              itemStyle: {
                normal: {
                  // 渐变柱状图
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#24C9FF' }, // 柱图渐变色
                    { offset: 0.5, color: '#24ABFF' }, // 柱图渐变色
                    { offset: 1, color: '#248DFF' } // 柱图渐变色
                  ])
                }
              }
            },
            {
              value: 26,
              name: 'Wap Web',
              label: {
                normal: {
                  textStyle: {
                    color: '#BD00FF',
                    fontSize: 12
                  }
                }
              },
              itemStyle: {
                normal: {
                  // 渐变柱状图
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#D200FF' }, // 柱图渐变色
                    { offset: 0.5, color: '#BD00FF' }, // 柱图渐变色
                    { offset: 1, color: '#BD00FF' } // 柱图渐变色
                  ])
                }
              }
            },
            {
              value: 24,
              name: 'Apple',
              label: {
                normal: {
                  textStyle: {
                    color: '#70218F',
                    fontSize: 12
                  }
                }
              },
              itemStyle: {
                normal: {
                  // 渐变柱状图
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#8A1D89' }, // 柱图渐变色
                    { offset: 0.5, color: '#7C1D8C' }, // 柱图渐变色
                    { offset: 1, color: '#70218F' } // 柱图渐变色
                  ])
                }
              }
            }
          ]
        }
      ]
    }

    option && myChart.setOption(option)
  }
}
</script>

<style>

</style>
